import MapContainer from '@/mapContainer'

const map = new MapContainer({ target: document.getElementById('map') })
let log = 113.151737

const div = document.createElement('div')
div.innerText = '儿子 我是你爸爸'
div.style.width = '200px'
div.style.height = '200px'
div.style.backgroundColor = '#fff'

document.getElementById('add').addEventListener('click', () => {
  map.addMarkers([{
    iconUrl: require('@/img.png').default,
    location: [log, 27.835806],
    attributes: {
      name: '你爸爸'
    }
  }, {
    iconUrl: require('@/img.png').default,
    location: [log, 27.935806],
    attributes: {
      name: '你爸爸'
    }
  }], {
    clickCallBack: (e) => {
      map.openInfoWindow(e.latLng, div)
    }
  })
})

document.getElementById('delete').addEventListener('click', () => {
  map.clearMarkers()
})

document.getElementById('drawPolyLine').addEventListener('click', () => {
  map.drawPloyLines([[[113.151737, 27.935806], [110.151737, 30.035806], [113.151737, 28.135806]]], {},
    ({ point, index }, { addLabels }) => {
      addLabels({ location: point, label: `我是你爸爸${index}` })
    }
  )
})

document.getElementById('deletePolyLine').addEventListener('click', () => {
  map.clearPloyLines()
})

document.getElementById('drawLabel').addEventListener('click', () => {
  map.addLabels([{
    location: [113.151737, 27.935806], label: '我是你爸爸'
  }, {
    location: [110.151737, 30.035806], label: '你是我儿子'
  }])
})

document.getElementById('deleteLabel').addEventListener('click', () => {
  map.clearLabels()
})
